<template>
	<view class="topicsBox">
		<!-- 遮罩层 -->
		<view :class="{notShowUp: isShowUp}">
			<view class="mask" @click="hidePicker"></view>
		</view>
		<!-- 表单 -->
		<form class="form" @submit="btnSubmit" @reset="btnReset">
			<!-- 标题 -->
			<view class="titleBox">
				<text>标题：</text>
				<input class="title" name="title" v-model="title" placeholder-style="color:#afafaf" placeholder="请输入标题"
					type="text" @input="titleOnChange">
			</view>

			<!-- 选择快递公司 -->
			<view class="courierCompany">
				<text>快递公司：</text>
				<input class="company" name="courierCompany" :value="courierCompanies[companyIndex]"
					@click="ShowUpPicker" type="text" placeholder="请选择快递公司" placeholder-style="color:#afafaf">
			</view>

			<view :class="{notShowUp: isShowUp}">
				<view class="pickerBox">
					<!-- 取消确定框 -->
					<view class="banner">
						<view class="cancel" @click="hidePicker">取消</view>
						<view class="confirm" @click="hidePicker">确定</view>
					</view>
					<!-- 选项 -->
					<picker-view class="pickerView" indicator-style="height: 50rpx;" indicator-class="selectedItem"
						@change="chooseCompany">
						<picker-view-column>
							<view class="pickerItem" v-for="(item, index) in courierCompanies" :key="index">{{item}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>

			<!-- 内容盒子 -->
			<view class="contentBox">
				<text>内容：</text>
				<textarea placeholder="请输入内容" v-model="content" @input="onChange" name="content"
					placeholder-style="color:#afafaf" class="content" type="text" maxlength="200">
				</textarea>
				<view class="textLimit">{{currentNum}}/{{maxLimit}}</view>
			</view>
			<!-- 价格 -->
			<view class="priceBox">
				<text>价格(￥)：</text>
				<input class="price" name="price" type="number" v-model="price" placeholder="请输入价格"
					placeholder-style="color:#afafaf" />
			</view>
			<!-- 地址盒子 -->
			<view class="addressBox">
				<img @click="chooseAddress"
					src="cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/position.png">
				<input class="address" v-model="address" name="address" placeholder="<-- 点击获取地址(可以自行修改地址)"
					placeholder-style="color:#afafaf" type="text" @input="addressOnChange">
			</view>
			<!-- 提交按钮 -->
			<button class="submit" type="primary" form-type="submit">发布</button>
			<!-- 重置按钮 -->
			<button class="reset" type="default" form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	const app = getApp()
	// 定时器
	let timer = null

	export default {
		name: "runErrands",
		props: {
			// 当前分栏的索引
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 云存储图片地址
				cloudImgsList: [],
				// 内容区域当前的字数
				currentNum: 0,
				// 选中地址
				address: '',
				title: '',
				content: '',
				price: null,
				// 内容区域最大的字数显示
				maxLimit: 200,
				// 标题和地址的字数
				titleNum: 0,
				addressNum: 0,
				// 表单内容
				formData: {},
				// 快递公司名字
				courierCompanies: ['顺丰快递', '圆通快递', '中通快递', '京东快递', '申通快递', '百世快递', '韵达快递'],
				courierCompaniesImages: [
					'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/shunfeng.png',
					'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/yuantong.jpg',
					'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/zhongtong.jpg',
					'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/jd.jpg',
					'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/shentong.jpg	',
					'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/baishi.jpg',
					'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/yunda.jpg'
				],
				// 判断遮罩层和picker是否显示
				isShowUp: true,
				// 选择的索引
				companyIndex: 0
			}
		},
		methods: {
			// 显示遮罩层和picker
			ShowUpPicker() {
				this.isShowUp = false
				timer = setInterval(()=>{
					uni.hideKeyboard()
				}, 60)
			},
			hidePicker(){
				clearInterval(timer)
				this.isShowUp = true
			},
			// 选择快递公司
			chooseCompany(res) {
				console.log(res);

				this.companyIndex = res.detail.value[0]
			},
			// 选地址定位
			chooseAddress() {
				uni.chooseLocation().then((res) => {
					console.log(res);
					this.address = res[1].name
					this.addressNum = res[1].name.length
				})
			},

			// 当内容区域变化时
			onChange(res) {
				this.currentNum = res.detail.value.length
			},
			// 标题和地址的内容发生变化
			titleOnChange(res) {
				this.titleNum = res.detail.value.length
			},
			addressOnChange(res) {
				this.addressNum = res.detail.value.length
			},

			// 判断表单是否填满
			isFullfilled() {
				if (!(this.titleNum && this.currentNum && this.addressNum)) {
					uni.showToast({
						title: '请完善发布内容',
						icon: 'none'
					})
					return false
				} else {
					return true
				}
			},

			// 把数据添加到用户信息里面
			addToMyRelease(_id, postTime) {
				wx.cloud.callFunction({
					name: 'add_myRelease',
					data: {
						currentIndex: this.currentIndex,
						formData: this.formData,
						cloudImgsList: this.cloudImgsList,
						postTime,
						userInfo: app.globalData.userInfo,
						_id,
						type:2
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					this.currentNum = 0
					this.titleNum = 0
					this.addressNum = 0
					// 使用数据双向绑定清除内容
					this.title = ''
					this.content = ''
					this.address = ''
					this.$refs.imagesBox.imgsList = []
				})
			},
			
			// 调用云函数，将数据提交到数据库
			addToDatabase() {
				const postTime = new Date().getTime()
				wx.cloud.callFunction({
					name: 'add_info_toDatabase',
					data: {
						currentIndex: this.currentIndex,
						formData: this.formData,
						cloudImgsList: this.cloudImgsList,
						postTime,
						userInfo:app.globalData.userInfo,
						type:2
					}
				}).then((res) => {
					this.addToMyRelease(res.result._id, postTime)
					console.log(res);
				})
			},

			// 提交按钮
			btnSubmit(res) {
				// 短震动效果
				uni.vibrateShort()
				let result = app.hasUserInfo()
				// 判断用户是否已经登录
				if (!result) {
					console.log('未登录');
					uni.navigateTo({
						url: '/pages/profile/unlogin'
					})
					return
				}
				uni.showLoading({
					title: '发布中...'
				})
				// 判断表单是否被填满
				const isFullfilled = this.isFullfilled()
				if (!isFullfilled) {
					console.log('没填满');
					return
				}
				this.formData = res.detail.value
				this.cloudImgsList.push(this.courierCompaniesImages[this.companyIndex])
				this.addToDatabase()
			},

			// 重置按钮
			btnReset() {
				// 短震动效果
				uni.vibrateShort()
				this.currentNum = 0
				this.titleNum = 0
				this.addressNum = 0
				this.companyIndex = 0
				// 使用数据双向绑定清除内容
				this.title = ''
				this.content = ''
				this.address = ''
				this.$refs.imagesBox.imgsList = []
			}
		}
	}
</script>

<style scoped lang="scss">
	// 遮罩层和picker的显示与隐藏
	.notShowUp {
		display: none;
	}

	// 最大盒子
	.topicsBox {
		background-color: white;
		width: 100%;
		height: 100vh;
		border-radius: 30rpx 30rpx 0 0;

		// 遮罩层
		.mask {
			position: absolute;
			width: 100vw;
			height: 100vh;
			background-color: black;
			opacity: 0.8;
			z-index: 90;
		}

		// 表单
		.form {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// background-color: aqua;

			// 标题大盒子
			.titleBox {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 700rpx;
				height: 80rpx;
				margin: 20rpx 20rpx;
				// background-color: aquamarine;

				// 文字
				text {
					flex: 2;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				// 标题输入框
				.title {
					flex: 8;
					border-bottom: 1rpx solid #efefef;
					width: 90%;
					height: 50rpx;
					margin-left: -30rpx;
				}
			}

			// 选择快递公司
			.courierCompany {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 95%;
				margin-left: 20rpx;

				text {
					flex: 2.5;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				.company {
					flex: 7.5;
					border-bottom: 1rpx solid #efefef;
				}
			}

			.pickerBox {
				width: 755rpx;
				position: fixed;
				bottom: 0;
				left: -3rpx;
				z-index: 99;
				border-top: 1rpx solid #efefef;
				border-radius: 25rpx 25rpx 0 0;
				overflow: hidden;
				box-sizing: border-box;

				// 取消确定框
				.banner {
					display: flex;
					justify-content: space-between;
					height: 80rpx;
					padding: 20rpx 30rpx;
					width: 100%;
					box-sizing: border-box;
					font-size: 36rpx;
					background-color: white;

					.cancel {
						height: 50rpx;
						color: #999999;
					}

					.confirm {
						height: 50rpx;
						color: #5a53c8;
					}
				}

				// 选项
				.pickerView {
					width: 100%;
					display: flex;
					flex-direction: column;
					height: 350rpx;
					background-color: white;

					/deep/ .selectedItem {
						border: 1rpx solid #7a7af1;
					}

					.pickerItem {
						width: 100%;
						height: 50rpx;
						font-size: 36rpx;
						text-align: center;
						line-height: 72rpx;
					}
				}
			}


			// 内容盒
			.contentBox {
				width: 700rpx;
				margin: 20rpx 20rpx;
				// background-color: aquamarine;

				// 文字
				text {
					flex: 2;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				// 内容框
				.content {
					border: 1rpx solid #efefef;
					margin-top: 20rpx;
					width: 680rpx;
					border-radius: 10rpx;
					padding: 10rpx;
				}

				// 字数限制显示
				.textLimit {
					margin: 10rpx 0rpx;
					text-align: right;
					color: #c2c2c2;
				}
			}

			// 价格
			.priceBox {
				width: 700rpx;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				text {
					flex: 3;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				.price {
					flex: 7;
					border-bottom: 1rpx solid #efefef;
					margin-left: -30rpx;
				}
			}

			// 地址
			.addressBox {
				display: flex;
				width: 700rpx;
				height: 50rpx;
				margin-left: 20rpx;
				// background-color: aquamarine;

				// 图片
				img {
					width: 50rpx;
					height: 50rpx;
				}

				// 地址输入框
				.address {
					margin-left: 10rpx;
					border-bottom: 1rpx solid #efefef;
					width: 600rpx;
				}
			}

			// 提交按钮
			.submit {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				background-color: #5a53c8;
				position: fixed;
				z-index: 10;
				right: 30rpx;
				bottom: 180rpx;
				opacity: 0.8;
			}

			// 重置按钮
			.reset {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				background-color: #f0f0f0;
				position: fixed;
				z-index: 10;
				right: 30rpx;
				bottom: 50rpx;
				opacity: 0.8;
			}
		}
	}
</style>
